<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>The source code</title>
  <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
  <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
  <style type="text/css">
    .highlight { display: block; background-color: #ddd; }
  </style>
  <script type="text/javascript">
    function highlight() {
      document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
    }
  </script>
</head>
<body onload="prettyPrint(); highlight();">
  <pre class="prettyprint lang-js">jslet.ui.htmlclass = {};
jslet.ui.GlobalZIndex = 100;

<span id='jslet-ui-KeyCode'>/**
</span> * @enum
 * 
 * Key code.
 */
jslet.ui.KeyCode = {
<span id='jslet-ui-KeyCode-property-BACKSPACE'>	BACKSPACE: 8, 
</span><span id='jslet-ui-KeyCode-property-TAB'>	TAB: 9,
</span><span id='jslet-ui-KeyCode-property-ENTER'>	ENTER: 13,
</span><span id='jslet-ui-KeyCode-property-SHIFT'>	SHIFT: 16,
</span><span id='jslet-ui-KeyCode-property-CONTROL'>	CONTROL: 17,
</span><span id='jslet-ui-KeyCode-property-ALT'>	ALT: 18,
</span>
<span id='jslet-ui-KeyCode-property-CAPSLOCK'>	CAPSLOCK: 20,
</span><span id='jslet-ui-KeyCode-property-ESCAPE'>	ESCAPE: 27,
</span><span id='jslet-ui-KeyCode-property-SPACE'>	SPACE: 32,
</span><span id='jslet-ui-KeyCode-property-PAGEUP'>	PAGEUP: 33,
</span><span id='jslet-ui-KeyCode-property-PAGEDOWN'>	PAGEDOWN: 34,
</span><span id='jslet-ui-KeyCode-property-END'>	END: 35,
</span><span id='jslet-ui-KeyCode-property-HOME'>	HOME: 36,
</span><span id='jslet-ui-KeyCode-property-LEFT'>	LEFT: 37,
</span><span id='jslet-ui-KeyCode-property-UP'>	UP: 38,
</span><span id='jslet-ui-KeyCode-property-RIGHT'>	RIGHT: 39,
</span><span id='jslet-ui-KeyCode-property-DOWN'>	DOWN: 40,
</span>	
<span id='jslet-ui-KeyCode-property-INSERT'>	INSERT: 45,
</span><span id='jslet-ui-KeyCode-property-DELETE'>	DELETE: 46,
</span>
<span id='jslet-ui-KeyCode-property-F1'>	F1: 112,
</span><span id='jslet-ui-KeyCode-property-F2'>	F2: 113,
</span><span id='jslet-ui-KeyCode-property-F3'>	F3: 114,
</span><span id='jslet-ui-KeyCode-property-F4'>	F4: 115,
</span><span id='jslet-ui-KeyCode-property-F5'>	F5: 116,
</span><span id='jslet-ui-KeyCode-property-F6'>	F6: 117,
</span><span id='jslet-ui-KeyCode-property-F7'>	F7: 118,
</span><span id='jslet-ui-KeyCode-property-F8'>	F8: 119,
</span><span id='jslet-ui-KeyCode-property-F9'>	F9: 120,
</span><span id='jslet-ui-KeyCode-property-F10'>	F10: 121,
</span><span id='jslet-ui-KeyCode-property-F11'>	F11: 122,
</span><span id='jslet-ui-KeyCode-property-F12'>	F12: 123,
</span>
<span id='jslet-ui-KeyCode-property-IME'>	IME: 229
</span>};

for(var i = 65; i &lt; 90; i++) {
	jslet.ui.KeyCode[String.fromCharCode(i)] = i;
}

<span id='jslet-ui-method-getParentElement'>/**
</span> * @method
 * @member jslet.ui
 * 
 * Get the specified level parent element. Example:
 * 
 *     @example
 *     //html snippet is: body -&gt; div1 -&gt; div2 -&gt;table
 *     jslet.ui.getParentElement(div2); // return div1
 *     jslet.ui.getParentElement(div2, 2); //return body 
 * 
 * @param {HtmlElement} htmlElement HTML element.
 * @param {Integer} level level
 * 
 * @return {HtmlElement} Parent element, if not found, return null.
 */
jslet.ui.getParentElement = function (htmlElement, level) {
	if (!level) {
		level = 1;
	}
	var flag = htmlElement.parentElement ? true : false,
	result = htmlElement;
	for (var i = 0; i &lt; level; i++) {
		if (flag) {
			result = result.parentElement;
		} else {
			result = result.parentNode;
		}
		if (!result) {
			return null;
		}
	}
	return result;
};

<span id='jslet-ui-method-findFirstParent'>/**
</span> * @private
 * 
 * Find first parent with specified condition. Example:
 * 
 *      @example
 *      //Html snippet: body -&gt;div1 -&gt;div2 -&gt; div3
 *	   var odiv = jslet.ui.findFirstParent(
 *		  odiv3, 
 *		  function (node) {return node.class == 'head';},
 *		  function (node) {return node.tagName != 'BODY'}
 *       );
 * 
 * @member jslet.ui
 * 
 * @param {HtmlElement} element The start checking html element.
 * @param {Function} startConditionFn Callback function.
 * @param {HtmlElement} startConditionFn.node: function(node}{...}, node is html element;
 * @param {Boolean} startConditionFn.return True - Start to get parent node, false - otherwise. 
 * @param {Function} stopConditionFn Callback function.
 * @param {HtmlElement} stopConditionFn.node: function(node}{...}, node is html element;
 * @param {Boolean} startConditionFn.return True - End to get parent node, false - otherwise. 
 * 
 * @return {HtmlElement} Parent element or null.
 */
jslet.ui.findFirstParent = function (htmlElement, conditionFn, stopConditionFn) {
	var p = htmlElement;
	if (!p) {
		return null;
	}
	if (!conditionFn) {
		return p.parentNode;
	}
	if (conditionFn(p)) {
		return p;
	} else {
		if (stopConditionFn &amp;&amp; stopConditionFn(p.parentNode)) {
			return null;
		}
		return jslet.ui.findFirstParent(p.parentNode, conditionFn, stopConditionFn);
	}
};

<span id='jslet-ui-method-findJsletParent'>/**
</span> * @private
 * 
 * Find parent element that has 'jslet' property.
 * 
 * @member jslet.ui
 * 
 * @param {HtmlElement} element The start checking html element.
 * 
 * @return {HtmlElement} Parent element or null.
 */
jslet.ui.findJsletParent = function(element){
	return jslet.ui.findFirstParent(element, function(ele){
		return ele.jslet ? true:false; 
	});
};

<span id='jslet-ui-method-isChild'>/**
</span> * @private
 * 
 * Check one node is a child of another node or not.
 * 
 * @member jslet.ui
 * 
 * @param {HtmlElement} parentNode parent node.
 * @param {HtmlElement} testNode, testing node.
 * 
 * @return {Boolean} true - 'testNode' is a child of 'parentNode', false - otherwise.
 */
jslet.ui.isChild = function(parentNode, testNode) {
	if(!parentNode || !testNode) {
		return false;
	}
	var p = testNode;
	while(p) {
		if(p == parentNode) {
			return true;
		}
		p = p.parentNode;
	}
	return false;
};

<span id='jslet-ui-TextMeasurer'>/**
</span> * @class
 * 
 * Text Measurer, measure the display width or height of the given text. Example:
 * 
 *     @example
 *     jslet.ui.textMeasurer.setElement(document.body);
 *     try{
 *       var width = jslet.ui.textMeasurer.getWidth('HellowWorld');
 *       var height = jslet.ui.textMeasurer.getHeight('HellowWorld');
 *     }finally{
 *       jslet.ui.textMeasurer.setElement();
 *     }
 * 
 */
jslet.ui.TextMeasurer = function () {
	var rule,felement = document.body,felementWidth;

	var lastText = null;
	
	var createRule = function () {
		if (!rule) {
			rule = document.createElement('div');
			document.body.appendChild(rule);
			rule.style.position = 'absolute';
			rule.style.left = '-9999px';
			rule.style.top = '-9999px';
			rule.style.display = 'none';
			rule.style.margin = '0px';
			rule.style.padding = '0px';
			rule.style.overflow = 'hidden';
		}
		if (!felement) {
			felement = document.body;
		}
	};

<span id='jslet-ui-TextMeasurer-method-setElement'>	/**
</span>	 * Set HTML element which to be used to merge. 
	 * 
	 * @param {HtmlElement} element.
	 */
	this.setElement = function (element) {
		felement = element;
		if (!felement) {
			return;
		}
		createRule();
		rule.style.fontSize = felement.style.fontSize;
		rule.style.fontStyle = felement.style.fontStyle;
		rule.style.fontWeight = felement.style.fontWeight;
		rule.style.fontFamily = felement.style.fontFamily;
		rule.style.lineHeight = felement.style.lineHeight;
		rule.style.textTransform = felement.style.textTransform;
		rule.style.letterSpacing = felement.style.letterSpacing;
	};

	this.setElementWidth = function (width) {
		felementWidth = width;
		if (!felement) {
			return;
		}
		if (width) {
			felement.style.width = width;
		} else {
			felement.style.width = '';
		}
	};

	function updateText(text){
		if (lastText != text) {
			rule.innerHTML = text;
		}
	}
	
<span id='jslet-ui-TextMeasurer-method-getSize'>	/**
</span>	 * Get the display size of specified text.
	 * 
	 * @param {String} text The text to be measured.
	 * 
	 * @return {Integer} Display size, unit: px.
	 */
	this.getSize = function (text) {
		createRule();
		updateText(text);
		var ruleObj = jQuery(rule);
		return {width:ruleObj.width(),height:ruleObj.height()};
	};

<span id='jslet-ui-TextMeasurer-method-getWidth'>	/**
</span>	 * Get the display width of specified text.
	 * 
	 * @param {String} text The text to be measured.
	 * 
	 * @return {Integer} Display width, unit: px.
	 */
	this.getWidth = function (text) {
		return this.getSize(text).width;
	};

<span id='jslet-ui-TextMeasurer-method-getHeight'>	/**
</span>	 * Get the display height of specified text.
	 * 
	 * @param {String} text The text to be measured.
	 * 
	 * @return {Integer} Display height, unit: px.
	 */
	this.getHeight = function (text) {
		return this.getSize(text).height;
	};
};

<span id='jslet-ui-property-textMeasurer'>/**
</span> * Text measurer. Example:
 * 
 *     @example
 *     jslet.ui.textMeasurer.setElement(document.body);
 *     try{
 *       var width = jslet.ui.textMeasurer.getWidth('HellowWorld');
 *       var height = jslet.ui.textMeasurer.getHeight('HellowWorld');
 *     }finally{
 *       jslet.ui.textMeasurer.setElement();
 *     }

 * @type {jslet.ui.TextMeasurer}
 * 
 * @member jslet.ui
 */
jslet.ui.textMeasurer = new jslet.ui.TextMeasurer();

<span id='jslet-ui-method-getCssValue'>/**
</span> * Get css property value. Example:
 * 
 *     @example
 *     var width = jslet.ui.getCssValue('fooClass', 'width'); //Return value like '100px' or '200em'
 * 
 * @member jslet.ui
 * 
 * @param {String} className Css class name.
 * @param {String} styleName style name
 * 
 * @return {String} Css property value.
 */
jslet.ui.getCssValue = function(className, styleName){
	var odiv = document.createElement('div');
	odiv.className = className;
	odiv.style.display = 'none';
	document.body.appendChild(odiv);
	var result = jQuery(odiv).css(styleName);
	
	document.body.removeChild(odiv);
	return result;
};

jslet.ui.setEditableStyle = function(formElement, disabled, readOnly, onlySetStyle, required) {
	if(!onlySetStyle) {
		formElement.disabled = disabled;
		formElement.readOnly = readOnly;
	}
	var jqEl = jQuery(formElement);
	if(disabled || readOnly) {
		if (!jqEl.hasClass('jl-readonly')) {
			jqEl.addClass('jl-readonly');
			jqEl.removeClass('jl-ctrl-required');
		}
	} else {
		jqEl.removeClass('jl-readonly');
		if(required) {
			jqEl.addClass('jl-ctrl-required');
		}
	}
};

<span id='jslet-ui-method-scrollbarSize'>/**
</span> * Get system scroll bar width.
 * 
 * @member jslet.ui
 * 
 * @return {Integer} scroll bar width.
 */
jslet.ui.scrollbarSize = function() {
	var parent, child, width, height;

	if (width === undefined) {
		parent = jQuery('&lt;div style=&quot;width:50px;height:50px;overflow:auto&quot;&gt;&lt;div/&gt;&lt;/div&gt;').appendTo('body');
		child = parent.children();
		width = child.innerWidth() - child.height(99).innerWidth();
		parent.remove();
	}

	return width;
};

/*
 * getStyleObject Plugin for jQuery JavaScript Library
 * From: http://upshots.org/?p=112
 *
 * Copyright: Unknown, see source link
 * Plugin version by Dakota Schneider (http://hackthetruth.org)
 */
(function($){
    $.fn.getStyleObject = function(){
        var dom = this.get(0);
        var style, prop;
        var returns = {};
        if(window.getComputedStyle){
            var camelize = function(a,b){
                return b.toUpperCase();
            };
            style = window.getComputedStyle(dom, null);
            for(var i=0;i&lt;style.length;i++){
                prop = style[i];
                var camel = prop.replace(/\-([a-z])/g, camelize);
                var val = style.getPropertyValue(prop);
                returns[camel] = val;
            }
            return returns;
        }
        if(dom.currentStyle){
            style = dom.currentStyle;
            for(prop in style){
                returns[prop] = style[prop];
            }
            return returns;
        }
        return this.css();
    };
})(jQuery);

jslet.Clipboard = function() {
	var doc = window.document;
	var clipboard = doc.getElementById('jsletClipboard');
	if(!clipboard) {
		jQuery('&lt;textarea id=&quot;jsletClipboard&quot; style=&quot;position:absolute;top:-1000px&quot; tabindex=&quot;-1&quot;&gt;&lt;/textarea&gt;').appendTo(doc.body);
	
	    window.addEventListener('copy', function (event) {
	        var text = jQuery('#jsletClipboard').val();
	        if(text) {
		        if(event.clipboardData) {
		        	event.clipboardData.setData('text/plain', text);
		        } else {
		        	window.clipboardData.setData('text', text);
		        }
		        jQuery('#jsletClipboard').val(null);
		        event.preventDefault();
		        return false;
	        }
	    });
	}
};

jslet.Clipboard.putText = function(text) {
	var clipboard = jQuery('#jsletClipboard').val(text);
	clipboard[0].select();
};

jslet.Clipboard();
</pre>
</body>
</html>
